<template>
  <div class="container-box">
    <van-nav-bar fixed>
      <!-- 显示定位 -->
      <template #left>
        <van-icon name="arrow-left" @click="onClickLeft" />
      </template>
      <!-- 查询 -->
      <template #title>
        蛋糕品牌
      </template>
    </van-nav-bar>
    <div class="list">
      <van-cell
        :border="false"
        :title="item.name"
        icon="location-o"
        is-link
        v-for="item in brands"
        :key="item.id"
        @click="brandDetails"
      >
        <template #icon>
          <van-image :src="item.image_path" />
        </template>
      </van-cell>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from '@/layout/components/Footer/Footer.vue'
export default {
  components: {
    Footer
  },
  data() {
    return {
      brands: [
        {
          id: '101709',
          name: '幸福西饼（武汉）',
          image_path: 'https://img.dangaoss.com/public/b/92/28/1204526_s.jpg',
          cat_id: '1',
          shop_discount: '75'
        },
        {
          id: '101007',
          name: '维尔纳斯',
          image_path: 'https://img.dangaoss.com/public/b/95/18/1317884_s.jpg',
          cat_id: '1',
          shop_discount: '70'
        },
        {
          id: '101452',
          name: '蜜时cake',
          image_path: 'https://img.dangaoss.com/public/b/3/19/1165926_s.jpg',
          cat_id: '1',
          shop_discount: '80'
        },
        {
          id: '101697',
          name: '黑池蛋糕（全国）',
          image_path: 'https://img.dangaoss.com/public/b/75/30/1279749_s.jpg',
          cat_id: '1',
          shop_discount: '75'
        },
        {
          id: '101238',
          name: '芙拉维尔',
          image_path: 'https://img.dangaoss.com/public/b/3/33/1279974_s.jpg',
          cat_id: '1',
          shop_discount: '80'
        },
        {
          id: '3',
          name: '元祖',
          image_path: 'https://img.dangaoss.com/public/b/13/13/1358986_s.jpg',
          cat_id: '1',
          shop_discount: '86'
        },
        {
          id: '135',
          name: '味之初',
          image_path: 'https://img.dangaoss.com/public/b/95/13/1279769_s.jpg',
          cat_id: '1',
          shop_discount: '80'
        },
        {
          id: '101891',
          name: 'AOK果色',
          image_path: 'https://img.dangaoss.com/public/b/78/12/1280841_s.jpg',
          cat_id: '1',
          shop_discount: '80'
        },
        {
          id: '102404',
          name: '梅花王蛋糕',
          image_path: 'https://img.dangaoss.com/public/b/85/23/1344307_s.jpg',
          cat_id: '1',
          shop_discount: '70'
        },
        {
          id: '102165',
          name: '乐享烘焙',
          image_path: 'https://img.dangaoss.com/public/b/41/28/1318523_s.jpg',
          cat_id: '1',
          shop_discount: '70'
        },
        {
          id: '102424',
          name: '好来西烘焙',
          image_path: 'https://img.dangaoss.com/public/b/58/34/1348240_s.jpg',
          cat_id: '1',
          shop_discount: '70'
        },
        {
          id: '102450',
          name: '贝客尔蛋糕（全国）',
          image_path: 'https://img.dangaoss.com/public/b/66/21/1349337_s.jpg',
          cat_id: '1',
          shop_discount: '70'
        },
        {
          id: '101941',
          name: '仟吉蛋糕',
          image_path: 'https://img.dangaoss.com/public/b/9/9/1296711_s.jpg',
          cat_id: '1',
          shop_discount: '86'
        },
        {
          id: '102479',
          name: '阡陌（全国配送）',
          image_path: 'https://img.dangaoss.com/public/b/69/13/1353399_s.jpg',
          cat_id: '1',
          shop_discount: '70'
        },
        {
          id: '102268',
          name: '积慕cake',
          image_path: 'https://img.dangaoss.com/public/b/20/13/1327610_s.jpg',
          cat_id: '1',
          shop_discount: '85'
        },
        {
          id: '102292',
          name: '麦物酪客',
          image_path: 'https://img.dangaoss.com/public/b/96/27/1323924_s.jpg',
          cat_id: '1',
          shop_discount: '72'
        },
        {
          id: '102302',
          name: '甜趣cake',
          image_path: 'https://img.dangaoss.com/public/b/34/7/1350988_s.jpg',
          cat_id: '1',
          shop_discount: '70'
        },
        {
          id: '102321',
          name: '皇冠幸福里',
          image_path: 'https://img.dangaoss.com/public/b/46/20/1329319_s.jpg',
          cat_id: '1',
          shop_discount: '100'
        },
        {
          id: '102600',
          name: '熊猫不走',
          image_path: 'https://img.dangaoss.com/public/b/86/24/1366286_s.jpg',
          cat_id: '1',
          shop_discount: '75'
        },
        {
          id: '102649',
          name: '精选零食店',
          image_path: 'https://img.dangaoss.com/public/b/68/32/1373990_s.jpg',
          cat_id: '1',
          shop_discount: '75'
        },
        {
          id: '101505',
          name: '麦5',
          image_path: 'https://img.dangaoss.com/public/b/81/36/1279755_s.jpg',
          cat_id: '1',
          shop_discount: '72'
        },
        {
          id: '101669',
          name: '伊莉维尔',
          image_path: 'https://img.dangaoss.com/public/b/63/34/1280826_s.jpg',
          cat_id: '1',
          shop_discount: '84'
        },
        {
          id: '101468',
          name: '仟吉（电子券）',
          image_path: 'https://img.dangaoss.com/public/b/11/11/1296713_s.jpg',
          cat_id: '4',
          shop_discount: '0'
        },
        {
          id: '101635',
          name: '瑞幸luckin coffee',
          image_path: 'https://img.dangaoss.com/public/b/85/28/1221250_s.jpg',
          cat_id: '4',
          shop_discount: '0'
        },
        {
          id: '102408',
          name: '伊莉维尔(电子券)',
          image_path: 'https://img.dangaoss.com/public/b/88/14/1344409_s.jpg',
          cat_id: '4',
          shop_discount: '84'
        },
        {
          id: '101898',
          name: 'Godiva 歌帝梵（电子券）',
          image_path: 'https://img.dangaoss.com/public/b/70/33/1282120_s.jpg',
          cat_id: '4',
          shop_discount: '0'
        },
        {
          id: '101649',
          name: '太平洋咖啡',
          image_path: 'https://img.dangaoss.com/public/b/81/1/1225404_s.jpg',
          cat_id: '4',
          shop_discount: '0'
        },
        {
          id: '101906',
          name: 'DQ（电子券）',
          image_path: 'https://img.dangaoss.com/public/b/91/19/1282735_s.jpg',
          cat_id: '4',
          shop_discount: '0'
        },
        {
          id: '102423',
          name: '好来西烘焙(电子券)',
          image_path: 'https://img.dangaoss.com/public/b/27/7/1345734_s.jpg',
          cat_id: '4',
          shop_discount: '93'
        },
        {
          id: '101921',
          name: '星巴克（券）',
          image_path: 'https://img.dangaoss.com/public/b/12/33/1284636_s.jpg',
          cat_id: '4',
          shop_discount: '0'
        },
        {
          id: '101583',
          name: '哈根达斯-电子券',
          image_path: 'https://img.dangaoss.com/public/b/9/33/1204938_s.jpg',
          cat_id: '4',
          shop_discount: '0'
        }
      ]
    }
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    brandDetails() {
      // 跳转品牌
      this.$router.push('/brandDetails')
    }
  }
}
</script>

<style lang="less" scoped>
.container-box {
  background-color: #f5f5f5;
  padding-top: 46px;
  height: 100%;
  /deep/.van-nav-bar i.van-icon {
    color: #ff4463;
  }
  /deep/.van-nav-bar__title {
    color: #ff4463;
  }
  .list {
    .van-cell {
      padding: 0;
      align-items: center;
      .van-image {
        width: 18%;
        text-align: center;
        /deep/.van-image__img {
          display: inline-block;
          width: 80%;
        }
      }
      /deep/.van-cell__title {
        font-size: 0.3rem;
        display: flex;
        width: 80%;
        align-items: center;
        border-bottom: 1px solid #efefef;
        padding: 0.35rem 0;
      }
      .van-icon {
        margin: 0 0.2rem 0 0;
        color: #ded9d4;
      }
      &:last-child {
        /deep/.van-cell__title {
          border-bottom: 0;
        }
      }
    }
  }
}
</style>
